<template>
  <view :style="themeStore.themeStyle" class="user-center">
    <view class="header">
      <view class="header-title">个人中心</view>
      <!-- 用户信息 -->
      <view class="header-user-info">
        <!-- <view class="user-avatar"> -->
        <up-avatar size="50" :src="userInfo.sex === 'male' ? maleUrl : femaleUrl"></up-avatar>
        <!-- </view> -->
        <view class="m-l-20">
          <view class="font-size-44 m-b-8">{{ userInfo.card_name }}</view>
          <view>{{ userInfo.card_phone }}</view>
        </view>
      </view>
      <view class="header-bgImg">
        <image src="/static/images/shadow.png" mode="aspectFit" class="main-header-bgImg"></image>
      </view>
    </view>
    <view class="main-body">
      <view class="m-b-20 f-w-600">功能入口</view>
      <Cell :cellInfo="cellData" @click="gotoSettings"></Cell>
    </view>
  </view>
</template>

<script setup lang="ts">
import { route } from 'uview-plus'
import Cell from '@/components/cell/cell.vue'
const maleUrl = '/static/icons/user_male.png'
const femaleUrl = '/static/icons/user_female.png'
let userInfo = reactive({
  card_face_url: 'https://packer-data-files.oss-cn-shenzhen.aliyuncs.com/mapp_static/images/avatar.png',
  card_name: '赵传福',
  card_phone: '18814325766',
  sex: 'male'
})
const cellData = ref({
  isIcons: true,
  iconUrl: '/static/icons/settings_icon.png',
  label: '设置' // 显示文本
})

const gotoSettings = () => {
  route({
    url: '/pages_user/settings/settings',
    params: {
      name: '测试值'
    }
  })
}

onMounted(() => {})

// 主题更新
import { useThemeStore } from '@/store/modules/theme'
const themeStore = useThemeStore()
onShow(() => {
  themeStore.initTheme()
})
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  //后续加功底部导航栏去除
  box-sizing: border-box;
  overflow: hidden;
}
.user-center {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  .header {
    background-color: $color-primary;
    position: relative;
    height: 500rpx;
    .header-title {
      padding: 100rpx 0;
      text-align: center;
      color: #ffffff;
      font-size: 32rpx;
    }
    // 用户信息
    .header-user-info {
      display: flex;
      align-items: center;
      margin-left: 50rpx;
      color: #ffffff;
      .user-avatar {
        width: 120rpx;
        height: 120rpx;
      }
    }
    // 背影
    .header-bgImg {
      position: absolute;
      right: 0;
      top: -10rpx;
      width: 600rpx;
    }
  }
  .main-body {
    transform: translateY(-8%);
    width: 100%;
    flex-grow: 1;
    padding: 40rpx;
    border-radius: 30rpx 30rpx 0 0;
    background-color: #ffffff;
    z-index: 99;
  }
}
</style>
